import React, { FC } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout,Spin } from "antd";
import Logo from '../components/Logo.tsx'
import UserInfo from '../components/UserInfo.tsx';
import  './MainLayout.css'
import useLoadUserData from '../hooks/useLoadUserData.ts'
import useNavPage from '../hooks/useNavPage.ts';
const { Header, 
    // Footer, 
    Content } = Layout;
const MainLayout: FC = ()=>{
    const {waitingUserData} = useLoadUserData()
    useNavPage(waitingUserData)
    return (
    <Layout>
        <Header className="header">
            <div className="left"><Logo /></div>
            <div className="right"><UserInfo /></div>
        </Header>
        <Content>
        { waitingUserData 
            ? 
            <div style={{textAlign:'center',marginTop:'60px'}}>
                <Spin />
            </div>
            : <Outlet />
        }
            
        </Content>
        {/* <Footer className="footer">小董问卷 @2024- present.Created by 董楷洁</Footer> */}
    </Layout>
    )
}

export default MainLayout 